<template>
  <div>
    <div class="addbut"></div>

    <div id="queryDiv">
      <el-button @click="toAdd()" type="primary">
      <i class="el-icon-plus"></i>添加角色</el-button>
    </div>
    <div v-loading="loading.table">
      <el-table :data="roleList"  style="width: 100%;font-size:12px" border highlight-current-row>
        <el-table-column prop="roleCode" label="角色代码" align="center"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"  align="center"></el-table-column>

        <el-table-column  label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <i class="el-icon-edit el-icon--right"></i>
            <el-button type="text" @click="toEdit(scope.row)">编辑</el-button>

            <i class="el-icon-bell el-icon--right"></i>
            <el-button type="text" @click="assignPerm(scope.row)">权限</el-button>

            <i class="el-icon-delete el-icon--right"></i>
            <el-button type="text" @click="deleteRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination @current-change="paginationChangeFn" background layout="prev, pager, next" :page-count="pagination.pageCount"> </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name:'RoleList',
        data() {
            return {
                roleList:[],
                queryForm:{
                    name:'',
                    account:''
                },
                loading: {table: false},
                pagination: {currentPage: 1, pageCount: 0 }//总页数
            };
        },
        methods: {
            paginationChangeFn(currentPage) {
                this.pagination.currentPage = currentPage;
                this.loadGrid();
            },
            loadGrid() {
                this.loading.table=true;
                let params  = {currentPage: this.pagination.currentPage };
                this.$api.listRoles(params).then(response=>{
                    this.loading.table = false;
                    let result = response.data;
                    let data = result.data;
                    if(result.code==0){
                        this.roleList = data.list;
                    }
                    this.pagination.pageCount = result.data.totalPage;
                });
            },
            toAdd(){
                this.$router.push({name:'RoleEditor'});
            },
            deleteRole(row){
                this.$confirm('此操作将删除角色,请确认是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading.table=true;
                    let params = {'roleId':row.roleId};
                    this.$api.deleteRole(params).then(response=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadGrid();
                    });
                });
            },
            assignPerm(row){
                let params = {'roleId':row.roleId};
                this.$router.push({name:'RolePerm',params:params});
            },
            toEdit(row){
                let params = {'roleId':row.roleId};
                this.$router.push({name:'RoleEditor',params:params});
            },
            restPassword(row){
                this.$confirm('此操作将重置管理员密码为默认值,请确认是否重置?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading.table=true;
                    let params = {'adminId':row.adminId};
                    this.$api.restPassword(params).then(response=>{
                        this.$message({
                            type: 'success',
                            message: '重置成功!'
                        });
                        this.loadGrid();
                        this.loading.table=false;
                    });
                });
            }
        },
        created() {
            this.loadGrid();
        },
        mounted(){
        }
    };
</script>

<style lang="less" scoped>
  .addbut{
    margin-bottom:20px;
  }
  #statusSwitch {
    display: block;
  }
  .el-icon--right{
    color:#4db3ff;
    margin-left:15px
  }
  #queryDiv {
    margin-bottom: 20px;
    float: right;
    .queryInput {
      width:200px;
      margin-right:20px
    }
    .search{
      margin-left:20px
    }
    .btn-add{
      margin-left: 150px;
    }
  }
  .imgsrc{
    margin-left:20px;
    margin-top:10px;
  }
  .el-table .cell {
    white-space: pre-line;
  }

</style>
